<template>
  <div class="index">
    <el-container>
        <el-header>
          <div class="index-top">
            <div class="logo">
              <img src="../assets/logo.png" alt="">
            </div>
            <div class="title">品优购</div>
            <div class="loginout">
              欢迎光临~<a href="javascript:;" @click="loginout()">退出</a>
            </div>
          </div>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <!-- 侧边导航栏 -->
             <!-- 默认高亮显示
              :default-active="" -->
            <el-menu
              router
              unique-opened
              :default-active="lightactive"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
              <!-- 子菜单 -->
              <el-submenu :index="item.path" v-for="item in menuList" :key="item.id">
                <!-- 标题 -->
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{item.authName}}</span>
                </template>
                <!-- 展开内容 -->
                 <el-menu-item :index="menu.path" v-for="menu in item.children" :key="menu.id">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{menu.authName}}</span>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <!-- 内容区域 -->
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data(){
    return{
      menuList:[]
    }
  },
  components:{
  },
  created(){
    this.getmunelist();
  },
  computed:{
    lightactive(){
      return this.$route.path.substr(1);
    }
  },
  methods:{
    loginout(){
        this.$confirm('beby,确定退出登录吗？？？, 是否继续?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$message.success("成功推出");
          localStorage.removeItem("token");
          this.$router.push("/login");
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '恭喜您留在登录页'
          });          
        });
      
      
    },
    getmunelist(){
      this.$axios.get("menus",{
        headers:{
          Authorization:localStorage.getItem('token'),
        }
      }).then(res=>{
        const{data,meta}=res.data;
        if(meta.status===200){
          this.menuList=data;
        }else{
          this.$message.error(meta.msg);
        }
      })

    }
  }
}
</script>

<style lang="less" scoped>
.index{
  width: 100%;
  height: 100%;
  .el-container{
    width: 100%;
    height: 100%;
    .el-header{
      width: 100%;
      height: 60px;
      line-height: 60px;
      .index-top{
        display:flex;
        .logo{
          width: 180px;
          img{
            display: block;
            height: 40px;
            margin: 10px;
          }
        }
        .title{
          flex:1;
          text-align: center;
        }
        .loginout{
          width: 180px;
          text-align: right;
          font-weight: 700;
          a{
            color:aqua;
            text-decoration: none;
          }
        }
      }
    }
    .el-container{
      width: 100%;
      .el-aside{
        height: 100%;
        .el-menu-vertical-demo{
          height: 100%;
          border-right:none;
        }
      }
      .el-main{
        padding-top:0px;
        width: 100%;
      }
    }
  }
}
</style>